<template>
  <view class="apply-refund" v-if="info.id">
    <view class="refund-header">
      <view class="box-flex">
        <image :src="getMedia(info.storeLogo)" mode="aspectFill" class="header-img"></image>
        <view class="header-h2">{{info.storeName}}</view>
      </view>
      <view class="header-list">
        <view class="list-item" v-for="item in info.items" :key="item.orderItemId">
          <image :src="getMedia(item.mediaUrl)" mode="aspectFill" class="img"></image>
          <view class="item-info">
            <view class="info-h2">
              <view class="dot2">{{item.title}}</view>
              ￥{{item.totalPayment}}
            </view>
            <view class="info-p">购买时间:{{info.created}}</view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="detail-card detail-cate">
      <view class="cate-p">
        <view class="p-label">退款原因<span style="color: #f00;">*</span></view>
        <view class="p-span" @click="handleOpenPopup()">{{reason.code?reason.value:'请至少选择一项'}} <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons> </view>
      </view>
      <view class="cate-p">
        <view class="p-label">退款方式</view>
        <view class="p-span" style="color:#3a3a3a">原路返回</view>
      </view>
      <view class="cate-p">
        <view class="p-label">退款金额
          <view style="font-size: 22rpx;color: #B0B0B0;">实际退款金额以到账金额为准</view>
        </view>
        <view class="p-span sub-theme" style="font-weight: bold;">￥{{info.totalPayment}}</view>
      </view>
    </view>
    <uni-popup ref="reasonPopup" type="bottom">
      <view class="reason-popup">
        <view class="popup-header">
          <uni-icons type="closeempty" size="20" color="#B0B0B0" @click="$refs.reasonPopup.close()"></uni-icons>
          <view class="h2">退款原因</view>
          <view></view>
        </view>
        <view class="popup-main not-bar">
          <view class="main-list">
            <view class="list-item" v-for="item in reasonList" :key="item.code" @click="reason = item">
              <view class="item-label">{{item.value}}</view>
              <image class="item-img" :src="`../static/${item.code == reason.code?'status-radio-selected@2x':'status-radio-unselected@2x'}.png`" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="var-button" @click="$refs.reasonPopup.close()">确认</view>
        </view>
      </view>
    </uni-popup>
    <view class="detail-intro">
      <view class="intro-list title"><p>商品总价</p> ￥{{info.totalPrice}}</view>
      <view class="intro-list"><p>运费</p> ￥0</view>
      <view class="intro-list"><p>平台优惠 <span class="sub-theme">立减0元</span></p> -￥0</view>
      <view class="intro-list"><p>实付款</p> <span class="strong">￥{{info.totalPayment}}</span></view>
    </view>
    <view class="detail-footer">
      <view class="var-button" @click="handleSubmit()">提交</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id:'',
        info:{},
        reasonList:[],
        reason:{}
      };
    },
    onLoad(options) {
      this.id = options.id
      this.$get('/product/orderAdjustment/applyAfterService',{
        kind:'1',
        orderId:options.id
      }).then(res=>{
        if(res.code == '1'){
          this.reasonList = res.content.reasonList
        }
      })
      this._initData(options.id)
    },
    methods:{
      handleOpenPopup(){
        if(this.reasonList.length){
          this.$refs.reasonPopup.open()
        }else{
          this.$toast('参数错误')
        }
      },
      handleSubmit(){
        if(!this.reason.code) return this.$toast('请先选择退款原因')
        uni.showModal({
          title:'是否申请退款',
          success: (ret) => {
            if (ret.confirm) {
              const data = {
                adjustment: {
                  orderId: this.info.id,
                  reason:{
                    code: this.reason.code,
                    value: this.reason.value
                  },
                  kind:'1',
                  customRemark:''
                },
                "item": {
                  "orderItemId": this.info.items[0].orderItemId,
                  "refundQuantity": this.info.items[0].quantity
                }
              }
              this.$post('/product/orderAdjustment/applyRefundV1',data,'1').then(res=>{
                if(res.code == '1'){
                  setTimeout(()=>{
                    uni.navigateTo({
                      url:`/minePackage/refund-detail?id=${res.content.id}`
                    })
                  },1000)
                }else{
                  this.$toast(res.message)
                }
              })
            }
          }
        })
      },
      ///    network
      _initData(id){
        uni.showLoading({
          title:'加载中...'
        })
        this.$get(`/product/myOrder/orderDetail/${id}`,'',1).then(res=>{
          if(res.code === '1'){
            this.info = res.content
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.apply-refund{
  padding: 0 24rpx 120rpx;
  min-height: 100vh;
  background: var(--page-bg);
  box-sizing: border-box;
  .refund-header{
    margin: 0 0 24rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 24rpx;
    .box-flex{
      align-items: center;
    }
    .header-img{
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      margin-right: 8rpx;
    }
    .header-h2{
      flex: 1;
      font-size: 24rpx;
      font-weight: bold;
      color: var(--title-color);
    }
    .header-list{
      .list-item{
        display: flex;
        font-size: 22rpx;
        font-weight: 500;
        margin: 20rpx 0 0;
        .img{
          width: 124rpx;
          height: 124rpx;
          border-radius: 20rpx;
          margin-right: 24rpx;
        }
        .item-info{
          flex: 1;
          .info-h2{
            font-size: 30rpx;
            color: var(--title-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            .dot2{
              font-size: 26rpx;
              margin-right: 10rpx;
            }
          }
          .info-p{
            margin-top: 24rpx;
            font-size: 22rpx;
            color: var(--sub-title);
          }
        }
      }
    }
  }  /// refund-header end
  .detail-card{
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    .card-title{
      font-size: 28rpx;
      font-weight: bold;
    }
    .cate-p{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #6D6D6D;
      height: 80rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .p-label{
        color: #6D6D6D;
        margin-right: 20rpx;
      }
      .p-span{
        display: flex;
        align-items: center;
        span{
          font-size: 22rpx;
          color: var(--sub-title);
          margin-left: auto;
        }
      }
    }
  }
  .detail-intro{
    background: #fff;
    padding: 20rpx;
    border-radius: 32rpx;
    font-size: 26rpx;
    color: var(--title-color);
    margin: 20rpx 0;
    font-weight: bold;
    .intro-list{
      display: flex;
      align-items: center;
      height: 68rpx;
      font-size: 26rpx;
      &.title p{
        font-size: 28rpx;
        font-weight: bold!important;
        color: var(--title-color);
      }
      p{
        margin-right: auto;
        color: #6D6D6D;
        font-weight: 400;
      }
      .copy{
        line-height: 1;
        padding: 8rpx 22rpx;
        background: #f2f2f2;
        font-size: 24rpx;
        margin-left: 8rpx;
        border-radius: 4rpx;
        color: #6D6D6D;
      }
      .sub-theme{
        font-size: 22rpx;
        margin-left: 8rpx;
      }
      .strong{
        color: var(--sub-theme);
      }
    }
  }
  .detail-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 24rpx;
    background: #fff;
    font-size: 28rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .reason-popup{
    padding: 0 32rpx;
    background: #fff;
    border-radius: 32rpx 32rpx 0 0;
    .popup-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 120rpx;
      .h2{
        font-size: 30rpx;
        color: var(--title-color);
      }
    }
    .popup-main{
      max-height: 1000rpx;
      font-size: 26rpx;
      .main-title{
        font-size: 28rpx;
        font-weight: bold;
        line-height: 80rpx;
        border-top: 2rpx solid #efefef;
      }
      .main-list{
        .list-item{
          line-height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .item-img{
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
    .popup-footer{
      padding:28rpx;
    }
  }
}
</style>
